<template>
	<view class="course-list">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input 
				class="search-input" 
				type="text" 
				v-model="keyword" 
				placeholder="搜索课程名称"
				@confirm="handleSearch"
			/>
			<button class="add-btn" @click="goToAdd">添加课程</button>
		</view>
		
		<!-- 分类选择器 -->
		<view class="category-filter">
			<picker mode="selector" :range="categories" range-key="name" @change="handleCategoryChange">
				<view class="picker">
					<text>{{ getCategoryName(selectedCategory) }}</text>
					<text class="iconfont icon-arrow-down"></text>
				</view>
			</picker>
		</view>
		
		<!-- 课程列表 -->
		<scroll-view 
			class="list-container" 
			scroll-y 
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="list-item" v-for="item in courseList" :key="item._id">
				<image class="course-image" :src="item.imageUrl" mode="aspectFill"></image>
				<view class="course-info">
					<text class="course-title">{{ item.title }}</text>
					<text class="course-price">¥{{ item.price }}</text>
					<text class="course-location">{{ item.location }}</text>
				</view>
				<view class="action-buttons">
					<button class="edit-btn" @click="goToEdit(item._id)">编辑</button>
					<button class="delete-btn" @click="handleDelete(item._id)">删除</button>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="courseList.length === 0">
				<text>暂无课程数据</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 本地固定的分类列表
			categories: [
				{ _id: '', name: '全部分类' },
				{ _id: '1', name: '编程开发' },
				{ _id: '2', name: '设计创作' },
				{ _id: '3', name: '语言学习' },
				{ _id: '4', name: '考试认证' },
				{ _id: '5', name: '职场技能' },
				{ _id: '6', name: '兴趣爱好' }
			],
			selectedCategory: '', // 当前选中的分类ID
			keyword: '',
			courseList: [],
			page: 1,
			pageSize: 10,
			hasMore: true,
			isRefreshing: false
		}
	},
	onLoad() {
		this.loadCourseList()
	},
	methods: {
		// 获取分类名称
		getCategoryName(categoryId) {
			const category = this.categories.find(item => item._id === categoryId)
			return category ? category.name : ''
		},
		
		// 分类选择变化
		handleCategoryChange(e) {
			this.selectedCategory = e.detail.value
			this.page = 1
			this.hasMore = true
			this.loadCourseList(true)
		},
		
		// 加载课程列表
		async loadCourseList(isRefresh = false) {
			try {
				const res = await uniCloud.callFunction({
					name: 'getCourseList',
					data: {
						page: this.page,
						pageSize: this.pageSize,
						keyword: this.keyword,
						categoryId: this.selectedCategory || ''
					}
				})
				
				if (res.result.code === 0) {
					if (isRefresh) {
						this.courseList = res.result.data.list
					} else {
						this.courseList = [...this.courseList, ...res.result.data.list]
					}
					this.hasMore = res.result.data.hasMore
				} else {
					uni.showToast({
						title: res.result.msg || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载课程列表失败', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.isRefreshing = false
			}
		},
		
		// 搜索课程
		handleSearch() {
			this.page = 1
			this.hasMore = true
			this.loadCourseList(true)
		},
		
		// 加载更多
		loadMore() {
			if (this.hasMore) {
				this.page++
				this.loadCourseList()
			}
		},
		
		// 下拉刷新
		onRefresh() {
			this.isRefreshing = true
			this.page = 1
			this.hasMore = true
			this.loadCourseList(true)
		},
		
		// 跳转到添加课程页面
		goToAdd() {
			uni.navigateTo({
				url: '/pages/admin/course/edit'
			})
		},
		
		// 跳转到编辑课程页面
		goToEdit(courseId) {
			uni.navigateTo({
				url: `/pages/admin/course/edit?id=${courseId}`
			})
		},
		
		// 删除课程
		handleDelete(courseId) {
			uni.showModal({
				title: '提示',
				content: '确定要删除该课程吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await uniCloud.callFunction({
								name: 'deleteCourse',
								data: { courseId }
							})
							
							if (result.result.code === 0) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								// 重新加载列表
								this.page = 1
								this.loadCourseList(true)
							} else {
								uni.showToast({
									title: result.result.msg || '删除失败',
									icon: 'none'
								})
							}
						} catch (error) {
							console.error('删除课程失败', error)
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style>
.course-list {
	min-height: 100vh;
	background-color: #f8f9fc;
}

.search-bar {
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 1;
}

.search-input {
	flex: 1;
	height: 72rpx;
	background-color: #f5f5f5;
	border-radius: 36rpx;
	padding: 0 30rpx;
	margin-right: 20rpx;
}

.add-btn {
	width: 160rpx;
	height: 72rpx;
	line-height: 72rpx;
	background-color: #4a6ee0;
	color: #fff;
	border-radius: 36rpx;
	font-size: 28rpx;
}

.category-filter {
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	height: 80rpx;
	background-color: #f5f5f5;
	border-radius: 40rpx;
}

.picker text {
	font-size: 28rpx;
	color: #333;
}

.picker .icon-arrow-down {
	font-size: 24rpx;
	color: #999;
}

.list-container {
	height: calc(100vh - 112rpx);
	padding: 20rpx;
}

.list-item {
	display: flex;
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
}

.course-image {
	width: 200rpx;
	height: 150rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.course-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.course-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.course-price {
	font-size: 28rpx;
	color: #ff6b6b;
}

.course-location {
	font-size: 24rpx;
	color: #666;
}

.action-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.edit-btn, .delete-btn {
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	margin: 10rpx 0;
}

.edit-btn {
	background-color: #e6f7ff;
	color: #1890ff;
}

.delete-btn {
	background-color: #fff1f0;
	color: #ff4d4f;
}

.load-more, .no-more {
	text-align: center;
	padding: 20rpx;
	color: #999;
	font-size: 24rpx;
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}
</style> 